<template>
  <div class="weather">
    <div id="he-plugin-simple"></div>
  </div>
</template>
<script>
window.WIDGET = {
  CONFIG: {
    modules: "10234",
    background: "5",
    tmpColor: "FFFFFF",
    tmpSize: "22",
    cityColor: "FFFFFF",
    citySize: "22",
    aqiColor: "FFFFFF",
    aqiSize: "22",
    weatherIconSize: "36",
    alertIconSize: "22",
    padding: "0px 5px 0px 5px",
    shadow: "0",
    language: "zh",
    fixed: "false",
    vertical: "top",
    horizontal: "left",
    key: "f63015f935f04ef38bcfef97d51629b2",
  },
};
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
export default defineComponent({
  setup() {
    onMounted(() => {
      weather();
    });
    const weather = () => {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src =
        "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
      document.body.appendChild(s);
    };

    return {};
  },
});
</script>
<style lang="scss">
.weather {
  //   height: 100%;
  #weather-view-he {
    z-index: 99;
  }
  #he-plugin-simple {
    div {
      z-index: 9999;
    }
  }
}
</style>
